import { useEffect, useState } from 'react'
import { PageContainer, ProForm, ProFormText, ProFormDigit, ProFormUploadButton, ProFormCascader, ProFormCheckbox, ProFormRadio } from '@ant-design/pro-components'
import style from './index.less'
import { Alert, Steps, Tabs, message, Upload, Button } from 'antd'
import { getCookie } from '@/utils/cookie'
import { GetProductCategoryFnc } from '@/services/goods'

const AddBox = () => {
  const [headerObj] = useState({Authorization: getCookie('token')})  
  const [activeKey, setActiveKey] = useState(0) // 步骤条当前index    
  const [options, setOptions] = useState([]) // 级联选择器
  const [fileLists, setFileList] = useState([]) // 已上传的图片
  const [messageApi, contextHolder] = message.useMessage()

  // 步骤条描述
  const items = [{description:'基本信息'},{description:'商品参数'},{description:'商品属性'},{description:'商品图片'}]

  // 级联选择器 数据初始化
  const init = async () => {
    const res = await GetProductCategoryFnc()
    if (res.meta.status === 200) setOptions(res.data)
  }
  useEffect(() => { init() }, [])


  // 基本信息
  const basic = () => {
    return (
     <>
      <ProFormText label="商品名称" name="goods_name" rules={[{ required: true, message: '请填写商品名称'}]}/>
      <ProFormDigit label="商品价格" name="goods_price" rules={[{ required: true, message: '请填写商品价格'}]}/>
      <ProFormDigit label="商品数量" name="goods_number" rules={[{ required: true, message: '请填写商品数量'}]}/>
      <ProFormDigit label="商品重量" name="goods_weight" rules={[{ required: true, message: '请填写商品重量'}]}/>
      <ProFormCascader label="商品分类" name="goods_cat" fieldProps={{options: options, fieldNames: {label: 'cat_name', value: 'cat_id', children: 'children'}}} rules={[{ required: true, message: '请选择商品分类'}]}/>
     </>
    )
  }

  // 基本参数
  const params = () => {
    return (
      <ProFormCheckbox.Group label="商品颜色" options={['红色', '蓝色']} name="goods_color" rules={[{ required: true, message: '请选择商品颜色,可多选'}]}/>
    )
  }
  
  // 基本属性
  const attr = () => {
    return (
      <ProFormRadio.Group name="goods_width" label="商品尺寸" options={[{label: '大于5米', value: 'A'}, {label: '小于5米', value: 'B'}]}></ProFormRadio.Group>
    )
  }

  // 图片上传前 控制大小 格式
 const uploadBefore = (file: {size: number}) => {
    if (file.size / 1024 > 100) {
     messageApi.error( '上传文件不能超过200kb',1.5)
     return false || Upload.LIST_IGNORE;
    }
    return true
 }

 // 删除图片
 const removeImg = (file: any) => {
  if(file.response.meta.status === 200) {
    const deletePath = file.response.data.tmp_path
       const index = fileLists.findIndex((item: any) => {
       return item === deletePath
    })
    setFileList(fileLists.splice(index, 1))
  }
 }

 // 上传图片
 const imgChange = ({file, fileList}: any) => {
   if(file.status === 'done') {
    if(file.response.meta.status === 200) {
     const arr = fileList.map((item: any) => {
        return item.response.data.tmp_path
     })   
     setFileList(arr)
    }
   }
 }

  // 商品图片
 const img = () => {
    return (
     <>
      {contextHolder}
      <ProFormUploadButton label="图片上传" name="upload" fieldProps={{beforeUpload: uploadBefore, onRemove: removeImg, onChange: imgChange, headers: headerObj ,multiple: true ,listType: 'picture', maxCount: 5}} action="http://127.0.0.1:8888/api/private/v1/upload" />
      
      <Button type="primary" htmlType="submit">添加商品</Button>
     </>
    )
  }

 const tabItems = [
    { key: '0', label: '基本信息', children: basic()},
    { key: '1', label: '基本参数', children: params()},
    { key: '2', label: '基本属性', children: attr()},
    { key: '3', label: '商品图片', children: img()}
 ]
 
 const onFinish = (value: any) => {
    console.log(value)
 }

  return (
    <>
     <PageContainer header={{title: '',breadcrumb: { items: [{ title: '商品管理' }, { title: '商品列表', href: '/C/goods' }, { title: '添加商品' }] }}}>
       <div className={style.addContent}>
        <Alert message="添加商品信息" type="warning" showIcon />

        {/* 步骤条 */}
        <Steps className={style.step} current={activeKey} labelPlacement="vertical" items={items}/>

        {/* tab区域 */}
        <ProForm onFinish={onFinish} submitter={false} labelCol={{ span: 4 }} layout='horizontal' wrapperCol={{ span: 12}} style={{ maxWidth: 600 }}>
          <Tabs items={tabItems} tabPosition='left' onChange={(activeKey: string) => setActiveKey(parseInt(activeKey))}/>
        </ProForm>
       </div>
     </PageContainer>
    </>
  )
}

export default AddBox